<!-- components/LoginPC.vue -->
<template>
  <el-card class="login-container">
    <div class="header">
      <!-- <img src="../assets/logo.png" alt="Logo" class="logo" /> -->
      <h2>欢迎回来</h2>
      <p>请输入您的凭据以继续</p>
    </div>

    <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="邮箱">
      <el-input v-model="form.email" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.pws" type="password" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="slogin">登录</el-button>
      <el-button><router-link to="/register" style="background-color: inherit;color: inherit;">注册</router-link></el-button>
    </el-form-item>
  </el-form>

    <!-- <div class="social-login">
      <p>使用社交账号登录</p>
      <div class="social-icons">
        <el-button circle><i class="el-icon-qq" /></el-button>
        <el-button circle><i class="el-icon-wechat" /></el-button>
        <el-button circle><i class="el-icon-github" /></el-button>
      </div>
    </div> -->
  </el-card>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { login,getList,TableName  } from '@/utils/request';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import axios from 'axios';



const router = useRouter();
const userStore = useUserStore()
const form = ref({
  email: '',
  pws: ''
});

const rules = {
  email: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 15, message: '长度在3到15个字符', trigger: 'blur' }
  ],
  pws: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码至少6位', trigger: 'blur' }
  ]
};

const slogin = async() => {
  // formRef.value.validate((valid) => {
    
  // });
  const r = await login({
        username: form.value.email,
        pwd: form.value.pws,
      });
      if (r) {
        ElMessage.success('登录成功');
        userStore.setUser(r)
        console.log("eeee");
        router.push('/moviesite')
      } else {
        ElMessage.error('登录失败');

      }
  // console.log(form.value.email,form.value.pws);
  
};

onMounted(async() => {
  // console.log(form.value.email,form.value.pws);
  const resp = await getList(TableName.Products)
  console.log("产品："+resp)
  const resa = await getList(TableName.Articles)
  console.log("文章："+resa)
});
</script>

<style scoped>
.login-container {
  width: 400px;
  margin: 80px auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.logo {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

h2 {
  color: #303133;
  font-weight: 600;
  margin-bottom: 10px;
}

p {
  color: #606266;
  font-size: 14px;
}

.login-button {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  font-weight: 500;
}

.options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.forgot-password {
  background-color: inherit;
  color: #409EFF;
  font-size: 13px;
  text-decoration: none;
}

.social-login {
  margin-top: 20px;
  text-align: center;
}

.social-icons .el-button {
  margin: 0 8px;
  background-color: #f5f7fa;
}

.el-icon-qq::before {
  content: '\e70b';
}

.el-icon-wechat::before {
  content: '\e70c';
}

.el-icon-github::before {
  content: '\e70d';
}
</style>